<template>
  <div class='com-page'>
    <div class='com-chart' ref='map_ref'></div>
  </div>
</template>

<script>
import {getProvinceMapInfo} from '../utils/map_utils.js'
import test_fun from  '../assets/xinjiang_test.json'

export default {
  name: "yuqing_map",
  data() {
    return {
      chartInstance: null,
      allData: [],
      mapData: {} // 所获取的省份的地图矢量数据
    };
  },
  created() {
  },
  mounted() {
    this.initChart()
    this.getData()
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
    // this.updateChart()
  },
  destroyed() {
    window.removeEventListener('resize', this.screenAdapter)
  },
  computed: {},
  watch: {},
  methods: {
    async initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.map_ref)

      let _this=this
      // 当点击地图区域的时候，就跳转到该地区详情页面
      this.chartInstance.on('click', async arg => {
        // arg.name 得到所点击的省份, 这个省份他是中文
        // const provinceInfo = getProvinceMapInfo(arg.name)
        console.log(arg.name)
        _this.$router.push("/yuqing_map_detail?province="+arg.name)
        // 需要获取这个省份的地图矢量数据
        // 判断当前所点击的这个省份的地图矢量数据在mapData中是否存在
        // if (!this.mapData[provinceInfo.key]) {
        //   const ret = await axios.get('http://localhost:8999' + provinceInfo.path)
        //   this.mapData[provinceInfo.key] = ret.data
        //   this.$echarts.registerMap(provinceInfo.key, ret.data)
        // }
        // const changeOption = {
        //   geo: {
        //     map: provinceInfo.key
        //   }
        // }
        // this.chartInstance.setOption(changeOption)
      })

      // 获取中国地图的矢量数据
      // http://localhost:8999/static/map/china.json
      // 由于我们现在获取的地图矢量数据并不是位于KOA2的后台, 所以咱们不能使用this.$http
      const ret = await this.$http.get('http://localhost:9999/static/map/province/xinjiang.json')
    //   const ret = await this.$http.get('http://geo.datav.aliyun.com/areas_v2/bound/geojson',{
    //     params: {
    //       code: 650000
    // }
    // })
      // const ret = await this.$http.get('/areas_v2/bound/650000.json')
      console.log("新疆地图",ret)
      // this.$echarts.registerMap('xinjiang', ret.data)
      this.$echarts.registerMap('xinjiang', test_fun)
      // this.$echarts.registerMap('xinjiang', ret)
      const initOption = {
        tooltip: {
          trigger: 'item',
          // triggerOn: 'click',
          formatter: function (arg) {
            console.log(arg)
            return "敏感信息："+arg.value+" 条";
          }
        },
        geo: {
          type: 'map',
          map: 'xinjiang',
          zoom: 1.4,
          center: [83.150969, 41.768552],
          roam: true, // 设置允许缩放以及拖动的效果
          label: {
            // show: true // 展示标签
          }
        },
        visualMap: {
          min: 0,
          max: 200,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
      }
      this.chartInstance.setOption(initOption)
    },
    async getData() {
      // 获取服务器的数据, 对this.allData进行赋值之后, 调用updateChart方法更新图表
      const {data: ret} = await this.$http.get('/index')
      this.allData = ret.data.map
      console.log("yuqing_map-->", this.allData)
      this.updateChart()
    },
    updateChart() {
      // 处理图表需要的数据
      // 图例的数据
      const seriesArr = []
      // 地区键值对{乌鲁木齐，222}
      let areaArr = []
      for (let i = 0; i < this.allData.length; i++) {
        areaArr.push(
          {
            name: this.allData[i].loc,
            value: this.allData[i].num
          }
        )
      }

      seriesArr.push({
        name: "新疆地图",
        type: "map",
        mapType: 'xinjiang',
        data: areaArr
      })

      const dataOption = {
        series: [
          {
            data: areaArr,
            geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
            type: 'map'
          }
        ]
        // name: "新疆地图",
        // type: "map",
        // mapType: 'xinjiang',
        // data: areaArr
      }
      this.chartInstance.setOption(dataOption)
    },
    screenAdapter() {
      const titleFontSize = this.$refs.map_ref.offsetWidth / 100 * 3.6
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize
          }
        },
        legend: {
          itemWidth: titleFontSize / 2,
          itemHeight: titleFontSize / 2,
          itemGap: titleFontSize / 2,
          textStyle: {
            fontSize: titleFontSize / 2
          }
        }
      }
      this.chartInstance.setOption(adapterOption)
      this.chartInstance.resize()
    },
  }
}
</script>

<style scoped>

</style>
